<!--
-->
<template>
    <vxe-modal v-model="visible" :height="layout.modalHeight(900)" :min-width="layout.modalMinWidth(800)" :position="{top: '60px'}" :title="title" :width="layout.modalWidth(1000)" destroy-on-close resize show-footer show-maximize @close="cancelClick">
        <TemplatePreview :content="state.model.jsonReport"/>
        <template #footer>
            <el-button @click="cancelClick">取消</el-button>
            <el-button :loading="isSubmitting" type="primary" @click="cancelClick">
                确定
            </el-button>
        </template>
    </vxe-modal>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {FormMixins} from "@/utils/FormMixins";
import * as api from "../api.js";
import TemplatePreview from "@business/PrintTemplateManage/Preview/TemplatePreview.vue"

const {ELForm, visible, title, layout, isLoading, isSubmitting, state, setOptions, submitSuccess, cancelClick} = FormMixins();
const {$message} = window;

const Model = () => {
    return {}
}

// 表单显示
async function show(config) {
    setOptions(config);
    state.model = Model();
    state.model = {...state.model, ...state.options}
    // 初始化数据

}

// 提交表单
async function submit() {
    $message.success("操作成功")
    submitSuccess(state.model.jsonReport)
}

onMounted(() => {
})
defineExpose({
    show
})
</script>


<style lang="scss" scoped>
.list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    height: 460px;

    .cell {
        width: 140px;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        border-radius: 6px;
        margin-right: 10px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        box-sizing: border-box;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);

        .image {
            width: 100%;
            height: 140px;
            box-sizing: border-box;
            padding: 10px 20px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .name {
            padding: 10px;
        }
    }
    .selected {
        border: 1px solid var(--el-color-primary);
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    }
}
</style>
